<template>
  <div>
    <div class="zlxg_tk">
      <div class="top_tit">
        <span class="title">资料修改</span>
        <span class="close" @click="close">
          <a-icon type="close" style="font-size:20px;" />
        </span>
      </div>
      <ul>
        <li>
          <span class="tit">logo：</span>
          <div class="clearfix">
            <a-upload
              action="http://mobile.bearing.cn/set/upload.php"
              listType="picture-card"
              :fileList="logofileList"
              @preview="handlePreview"
              @change="logoChange"
              :remove="removelogo"
              accept=".jpg, .png"
            >
              <div v-if="logofileList.length < 1">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </li>
        <li>
          <span class="tit">商铺banner：</span>
          <div class="clearfix">
            <a-upload
              action="http://mobile.bearing.cn/set/upload.php"
              listType="picture-card"
              :fileList="banfileList"
              @preview="handlePreview"
              @change="banChange"
              accept=".jpg, .png"
            >
              <div v-if="banfileList.length < 4">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </li>
        <li>
          <div class="subup">
            <a-button type="primary" @click="subpicform">提交</a-button>
            <a-button @click="close">取消</a-button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      previewVisible: false,
      previewImage: "",
      logofileList: [],
      banfileList: [],
      logopic: [],
      banpic: [],
      uid: "",
      saleval: this.$parent.saleval
    };
  },

  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
    //图片上传---开始
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
  
    removelogo() {
      this.logofileList = [];
    },

    logoChange({ fileList }) {
      this.logofileList = fileList;
    },
    banChange({ fileList }) {
      this.banfileList = fileList;
      console.log(fileList);
    },
    //图片上传---结

    close() {
      this.$parent.saleflag = false;
    },
    subpicform() {
        console.log(this.logofileList)
      if (this.logofileList.length) {
          this.logopic=[]
        if (this.logofileList[0].url) {
          this.logopic = this.logofileList[0].logourl;
        } else {
          this.logopic = this.logofileList[0].thumbUrl;
        }
      } else {
        this.logopic = [];
      }
      if (this.banfileList.length) {
        this.banpic = [];
        for (var i = 0; i < this.banfileList.length; i++) {
          if (this.banfileList[i].url) {
            this.banpic.push(this.banfileList[i].banurl);
          } else {
            this.banpic.push(this.banfileList[i].thumbUrl);
          }
        }
      } else {
        this.banpic = [];
      }
      console.log(this.banfileList);
      console.log(this.banpic);

      this.axios
        .post(
          "quanxian/modifyLogoBanner.php",
          qs.stringify({
            sqdwid: this.saleval.sqdwid,
            bannerPic: this.banpic,
            logoPic: this.logopic
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$parent.handleChangelist(this.$parent.pagination);
            this.$parent.saleflag = false;
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    }
  },

  created() {
    if (this.$parent.saleval.pic.logo) {
      this.logopic = this.$parent.saleval.pic.logo;

      let ss = {
        uid: 0,
        name: " ",
        status: "done",
        url: "https://image.bearing.cn/cnbearing/qylg_pic/" + this.logopic,
        logourl:this.logopic
      };
      this.logofileList.push(ss);
    }
    if (this.$parent.saleval.pic.banner) {
      this.banpic = this.$parent.saleval.pic.banner.split("|");
      for (var i = 0; i < this.banpic.length; i++) {
        let ss = {
          uid: i,
          name: " ",
          status: "done",
          url:
            "https://image.bearing.cn/cnbearing/shopad_pic/" + this.banpic[i],
          banurl: this.banpic[i]
        };
        this.banfileList.push(ss);
      }
    }
    console.log(this.logofileList);
    console.log(this.banfileList);
  }
};
</script>

<style lang='less'>
.zlxg_tk {
  position: absolute;
  z-index: 999;
  top: 25%;
  left: 26%;
  width: 50%;
  background: #fff;
  text-align: left;
  padding: 20px;
  .top_tit {
    display: flex;
    justify-content: space-between;
    .title {
      display: inline-block;
      font-size: 17px;
      font-weight: bold;
      margin: 10px 10px;
    }
  }

  ul {
    li {
      margin: 10px 0;
      .tit {
        display: inline-block;
        width: 15%;
        text-align: right;
      }
      .subup {
        width: 50%;
        text-align: center;
        button {
          margin: 20px;
          line-height: 35px;
          width: 100px;
          height: 35px;
        }
      }
    }
  }
  .clearfix {
    display: inline-block;
    vertical-align: top;
    width: 80%;
  }
}
</style>
